import {
  LockTwoTone,
  PhoneOutlined,
} from '@ant-design/icons';
import React, { useState, useEffect, useRef } from 'react';
import ProForm, { ProFormCaptcha, ProFormCheckbox, ProFormText } from '@ant-design/pro-form';
import { connect, useIntl, FormattedMessage, Link } from 'umi';
import { Spin } from 'antd';
import { CloseCircleFilled } from '@ant-design/icons';
import logomask from '@/assets/logo_mask.png';
import styles from './index.less';
import SlideCaptcha from 'react-slide-captcha';
import 'react-slide-captcha/dist/styles.css';



const Login = (props) => {
  const { loading, submitting } = props;
  const intl = useIntl(), vnode = useRef(),
    [vs, cvs] = useState(false),
    [postdata, cpost] = useState(false);


  //提交
  const handleSubmit = (values) => {
    cpost({
      accountName: values.userName,
      password: values.password
    })
    cvs(true)
  };



  return (

    <div className={styles.main}>
      <div className={`${styles.head} spacebt`}>
        <span onClick={() => {
          vnode.current.resetCaptcha()
        }}>用户登录</span>
        <Link to="/user/signin" style={{ fontSize: 14, color: "#fff" }}
        >立即注册</Link>
      </div>
      <div className={styles.body}>
        <ProForm
          submitter={{
            searchConfig: {
              submitText: '登录',
            },
            render: (_, dom) => dom.pop(),
            submitButtonProps: {
              loading: submitting,
              size: 'large',
              style: {
                width: '100%',
              },
            },
          }}
          onFinish={async (values) => {
            handleSubmit(values);
          }}
        >
          <>
            <ProFormText
              name="userName"
              fieldProps={{
                size: 'large',
                prefix: <PhoneOutlined className={styles.prefixIcon} rotate={90} />,
              }}
              placeholder={intl.formatMessage({
                id: 'pages.login.username.placeholder',
                defaultMessage: '手机号',
              })}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="pages.login.username.required"
                      defaultMessage="请输入用户名!"
                    />
                  ),
                },
              ]}
            />
            <ProFormText.Password
              name="password"
              fieldProps={{
                size: 'large',
                prefix: <LockTwoTone className={styles.prefixIcon} />,
              }}
              placeholder={intl.formatMessage({
                id: 'pages.login.password.placeholder',
                defaultMessage: '密码',
              })}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="pages.login.password.required"
                      defaultMessage="请输入密码！"
                    />
                  ),
                },
              ]}
            />
          </>
          <div
            style={{
              marginBottom: 24,
            }}
          >
            <ProFormCheckbox noStyle name="autoLogin">
              <a style={{ color: "#fff" }}>
                自动登录
              </a>
            </ProFormCheckbox>
            <Link to="/user/fogot"
              style={{
                color: "#fff",
                float: 'right'
              }}
            >
              忘记密码
            </Link>
          </div>
        </ProForm>
      </div>
      {
        vs && <div style={{ position: "absolute", width: 300, height: 300, left: 24, bottom: -236 }}>
          <div style={{ position: "absolute", top: -165, right: 12, zIndex: 9999999, cursor: "pointer" }}>
            <CloseCircleFilled style={{ color: "#fff", fontSize: 18 }} onClick={() => {
              cvs(false)
            }}></CloseCircleFilled>
          </div>
          <SlideCaptcha
            displayType="static"
            puzzleUrl={require("@/assets/pingtus.png")}
            bgUrl={require("@/assets/pingtu.png")}
            containerClassName="test"
            resetButton="outline"
            imagePosition="top"
            reset="manual"
            ref={vnode}
            robotValidate={{
              offsetY: 5,
              handler: () => {
              },
            }}
            onRequest={(
              validateValue,
              validatedSuccess,
              validatedFail,
              resetCaptcha,
            ) => {
              console.log(validateValue);
              if (validateValue > 0.43 && validateValue < 0.44) {
                validatedSuccess(() => {
                  cvs(false)
                  const { dispatch } = props;
                  dispatch({
                    type: 'login/login',
                    payload: { ...postdata },
                  });
                })
              } else {
                validatedFail(() => {
                  resetCaptcha()
                })
              }
            }}
          />
        </div>
      }


    </div >
  );
};

export default connect(({ login, global, loading }) => ({
  global,
  userLogin: login,
  submitting: loading.effects['login/login'],
}))(Login);
